<template>
  <div class="incolumn">
    <div class="incolumn_countr">
      <div class="block">
        <el-form :inline="true" :model="Pagination" class="demo-form-inline">
          <el-form-item label="输入搜索" class="s1">
            <el-input v-model="Pagination.key" placeholder="请输入快递单号" style="width:150%"></el-input>
          </el-form-item>
          <el-form-item label="输入时间" label-width="230px">
            <el-date-picker
              v-model="formInline.time1"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="chage"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onsubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- =================列表表单 =====================  -->
    <div class="incolumn_from">
      <el-table
        :data="tableData_LOGISTICS"
        style="width: 100%;background-color:#fff"
        :height="autoHeightTable"
        stripe
      >
        <el-table-column label="序号" align="center" type="index" width="170"></el-table-column>
        <el-table-column prop="wuliuName" label="单位名称" align="center"></el-table-column>
        <el-table-column label="运输方式" align="center">
          <template v-slot="scope">
            <span v-show="scope.row.type==1">快递</span>
            <span v-show="scope.row.type==2">物流</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true"  prop="wuliuNumber" label="快递单号" align="center">
        </el-table-column>
        <el-table-column prop="" label="发货时间" align="center">
          <template v-slot="scope">
            {{ renderTime(scope.row.fahuoTime) }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template v-slot="scope">
            <span v-show="scope.row.status==1">待发货</span>
            <span v-show="scope.row.status==2">已发货</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showDetail(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom_slate">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="Pagination.current"
          :page-size="Pagination.pagesize"
          @current-change="handleCurrentChange"
          :total="Pagination.total"
        ></el-pagination>
      </div>
      <!--============弹框==================-->
      <el-dialog
        append-to-body
        :visible.sync="dialogVisible_detail"
        width="46%"
      >
        <span style="font-weight: 700;font-style: normal;font-size: 16px;color: #17233D;">物流单详情</span>
        <div style="width: 100%;border-top: 1px solid rgb(237, 239, 240);margin-top: 15px">
          <el-form :inline="true" :model="form_SUPPLIER" class="demo-form-inline" style="margin-top: 5px">
            <el-form-item label="企业名称">
              <el-input disabled v-model="form_SUPPLIER.enterpriseName"></el-input>
            </el-form-item>
            <el-form-item label="收货人">
              <el-input disabled v-model="form_SUPPLIER.contacts"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input disabled v-model="form_SUPPLIER.contactsPhone"></el-input>
            </el-form-item>
            <el-form-item label="收货地址">
              <el-input disabled v-model="form_SUPPLIER.adress"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span style="font-weight: 700;font-style: normal;font-size: 14px;color: #17233D;">运输方式：</span>
        <el-radio disabled v-model="radio_way" label="1">快递</el-radio>
        <el-radio disabled v-model="radio_way" label="2">物流</el-radio>
        <div style="width: 100%;border-top: 1px solid rgb(237, 239, 240);margin-top: 15px">
          <el-form :inline="true" :model="form_LOGISTICS" class="demo-form-inline" style="margin-top: 5px">
            <el-form-item label="快递公司">
              <el-input style="width: 100px" disabled v-model="form_LOGISTICS.wuliuName"></el-input>
            </el-form-item>
            <el-form-item label="物流单号">
              <el-input style="width: 170px" disabled v-model="form_LOGISTICS.wuliuNumber"></el-input>
            </el-form-item>
            <el-form-item v-show="radio_way==2" label="联系方式">
              <el-input style="width: 200px" disabled v-model="form_LOGISTICS.drivarPhone"></el-input>
            </el-form-item>
            <el-form-item v-show="radio_way==2" label="车牌号">
              <el-input style="width: 100px" disabled v-model="form_LOGISTICS.carNumber"></el-input>
            </el-form-item>
            <el-form-item v-show="radio_way==2" label="司机姓名">
              <el-input style="width: 100px" disabled v-model="form_LOGISTICS.driver"></el-input>
            </el-form-item>
            <el-form-item v-show="radio_way==2" label="司机联系方式">
              <el-input disabled v-model="form_LOGISTICS.drivarPhone"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span style="font-weight: 700;font-style: normal;font-size: 14px;color: #17233D;">货物详情：</span>
        <div style="width: 100%;border-top: 1px solid rgb(237, 239, 240);margin-top: 15px">
          <el-table
            :data="tableData_WAREHOUSELOG"
            style="width: 100%;height: 250px" :max-height="250">
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="120">
            </el-table-column>
            <el-table-column
              prop="productNumber"
              label="产品编号"  align="center"
              width="180">
            </el-table-column>
            <el-table-column
              prop="productName"  align="center"
              label="产品名称">
            </el-table-column>
            <el-table-column
              prop="number"  align="center"
              label="发货数量">
            </el-table-column>
          </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible_detail = false">取 消</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  components: {},
  computed: {
    autoHeightTable() {
      return document.documentElement.scrollHeight - 251 - 93
    }
  },
  data() {
    return {
      radio_way: "1",//运输方式
      tableData_LOGISTICS: [],
      tableData_WAREHOUSELOG: [],
      form_LOGISTICS: {},
      formInline: {},
      form_SUPPLIER: {},
      search: {key: "", start: "", end: ""},
      /**********************************分页数据对象***************************************/
      Pagination: {
        beginTime: "",
        endTime: "",
        key: "",
        total: 1,//总共页
        current: 1,//当前页
        pagesize: 10,//页面数据个数
      },
      /******************************弹框*******************************************/
      dialogVisible_detail: false,
    }

  },
  created() {
    this.getList();
  },
  methods: {
    //查看详情
    showDetail(id) {
      this.dialogVisible_detail = true
      axios.get("/JX_java/warehouse/getLogDetails?slId=" + id).then(res => {
        console.log(res.data.data)
        const data = res.data.data
        this.form_SUPPLIER.enterpriseName = data.clientMessage.enterpriseName
        this.form_SUPPLIER.contacts = data.clientMessage.contacts
        this.form_SUPPLIER.adress = data.clientMessage.adress
        this.form_SUPPLIER.contactsPhone = data.clientMessage.contactsPhone
        this.radio_way = data.type.toString()

        const warehouseLogs = data.warehouseLogs;
        this.form_LOGISTICS.wuliuName = data.wuliuName
        this.form_LOGISTICS.wuliuNumber = data.wuliuNumber
        this.form_LOGISTICS.carNumber = data.carNumber
        this.form_LOGISTICS.driver = data.driver
        this.form_LOGISTICS.drivarPhone = data.drivarPhone
        this.tableData_WAREHOUSELOG = warehouseLogs;
      })
    },
    //格式化时间
    renderTime(date) {
      return date==null?"":date.substring(0, 10);

      // const dateee = new Date(date).toJSON();
      // if (date == null) {
      //   return "---";
      // } else {
      //   return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
      // }
    },
    //分页方法
    handleCurrentChange(e) {
      this.Pagination.current=e;
      this.getList();
    },
    //时间change
    chage(e) {
      if (e) {
        this.Pagination.beginTime = e[0];
        this.Pagination.endTime = e[1];
      } else {
        this.Pagination.beginTime = '';
        this.Pagination.endTime = '';
      }
    },
    getList() {
      const data = {
        "beginTime": this.Pagination.beginTime,
        "endTime": this.Pagination.endTime,
        "key": this.Pagination.key,
        "pageNum": this.Pagination.current,
        "pageSize": this.Pagination.pagesize,
        "type": 0
      }
      axios.post("/JX_java/warehouse/getWuliuList", data).then(res => {
        console.log(res.data.data)
        this.tableData_LOGISTICS = res.data.data.content;
        this.Pagination.total=res.data.data.totalSize
        this.Pagination.current=res.data.data.pageNum
      })
    },
    //搜索
    onsubmit() {
      this.getList();
    },
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.Suppliermanagement .search {
  height: 50px;
  border-radius: 5px;
  background-color: #fff;
  padding-left: 20px;
  padding-top: 10px;
  margin: 0 20px 20px;
}

.Suppliermanagement .demo-form-inline {
  display: inline-block;
}

.Suppliermanagement .el-pagination {
  margin-top: 15px;
  text-align: center;
}

.Suppliermanagement .ebtn {
  float: right;
  margin-right: 20px;
}

.bottom_slate {
  height: 60px;
  line-height: 40px;
  text-align: center;
}
</style>
